<template>
  <div class="alarm-now">
    <box title="实时告警">
      <!-- 实时告警  -->
      <div class="px-[16px]">
        <div class="flex  justify-between">
          <div v-for="(item, index) in imageList" :key="index" @click="item?.clickFun()">
            <div
              :class="index == 0 ? ' bg-[url(@/assets/screenimg/timealerts.png)]' : index == 1 ? ' bg-[url(@/assets/screenimg/timealerts2.png)]' : 'bg-[url(@/assets/screenimg/timealerts3.png)]'"
              class="
        w-[92px]
        h-[104px]
         bg-no-repeat ">
              <div :class="index == 0 ? 'text-[#FF802B]' : index == 1 ? 'text-[#D6D6D6]' : 'text-[#FF4141]'" class="text-[24px]  font-medium text-center
         pt-[52px]">
                <div v-if="item.number <= 999">{{ isNullOrEmpty( item.number ) }}</div>
                <div v-else>999+</div>
              </div>
            </div>
            <div class="alltext text-center pt-[0px] pb-[24px]">{{ isNullOrEmpty( item.name ) }}</div>
          </div>
        </div>
        <!-- 设备详情 轮播 opacity-[0.6] -->
        <div class="h-[220px] bg-[#21283F]  opacity-[0.6]  px-[16px] rounded-[5px]">
          <el-carousel v-if="carousel.length == 0" indicator-position="none" height="220px" :interval="5000"
                       arrow="always">
            <el-carousel-item class="h-full" >
              <div class="h-full flex items-center">
                <div class="h-[172px] w-[172px]">
                  <el-image class="h-[172px] w-full" lazy fit="scale-down"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
                </div>
                <div class="ml-[20px]">
                  <div class="text-[22px] text-[#ffffff] font-bold">水泵</div>
                  <div class="alltext mt-[20px]">
                    <div class="text-[#7B8EA8]">设备编号</div>
                    <div class=" mt-[4px]">设备编号</div>
                  </div>
                  <div class="alltext mt-[16px]">
                    <div class="text-[#7B8EA8]">告警信息</div>
                    <div class=" mt-[4px]">设备编号</div>
                  </div>
                  <div class="alltext mt-[16px]">
                    <div class="text-[#7B8EA8]">告警时间</div>
                    <div class=" mt-[4px]">设备编号</div>
                  </div>

                </div>
              </div>
            </el-carousel-item>
            <el-carousel-item class="h-full" v-for="(item, index) in carousel" :key="index">
              <div class="h-full flex items-center">
                <div class="h-[172px] w-[172px]">
                  <el-image class="h-[172px] w-full" lazy fit="scale-down"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
                </div>
                <div class="ml-[20px]">
                  <div class="text-[22px] text-[#ffffff] font-bold">水泵</div>
                  <div class="alltext mt-[20px]">
                    <div class="text-[#7B8EA8]">设备编号</div>
                    <div class=" mt-[4px]">{{ isNullOrEmpty( item.deviceSN ) }}</div>
                  </div>
                  <div class="alltext mt-[16px]">
                    <div class="text-[#7B8EA8]">告警信息</div>
                    <div class=" mt-[4px]">{{ isNullOrEmpty( item.alarmTitle ) }}</div>
                  </div>
                  <div class="alltext mt-[16px]">
                    <div class="text-[#7B8EA8]">告警时间</div>
                    <div class=" mt-[4px]">{{ isNullOrEmpty( item.createdAt ) }}</div>
                  </div>

                </div>
              </div>
            </el-carousel-item>
          </el-carousel>

          <nullpng v-else/>
        </div>
      </div>
    </box>

  </div>

</template>
<script lang="ts" setup>
import {isNullOrEmpty} from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'

const props = defineProps({
  imageList: {
    type: Array,
    default: () => []

  },
  carousel: {
    type: Array,
    default: () => []
  },


});
console.log("fjd", props);

</script>

<style lang="scss" >
.alarm-now {
  .el-carousel__arrow {
    width: 20px;
    height: 20px;
    background: #fff;
    opacity: 0.4;

  }

  .el-icon {
    color: #222222;
  }
  :deep(.el-carousel__container) {
    //height: 100%;
  }

}


</style>
